<template>
  <div class="log-toolbox flex">

    <el-tooltip :content="$t('refresh')" :open-delay="1000">
      <i class="cuifont icon_arrow_sync cursor-pointer"
         @click="syncData"
         ></i>
    </el-tooltip>
    <el-tooltip :content="$t('test')" :open-delay="1000">
      <i class="cuifont icon_beaker cursor-pointer"
         @click="startTest"
         v-if="data.showTest&&data.showOnOff"></i>
    </el-tooltip>
    <el-tooltip :content="$t('custom.sync')" :open-delay="1000">
      <el-badge is-dot
                v-if="onoff !== 'ON'&&data.showOnOff">
        <i class="cuifont icon_play cursor-pointer"
           v-loading="syncLoading"
           element-loading-spinner="el-icon-loading"
           @click="startStop"></i>
      </el-badge>
    </el-tooltip>

    <ButtonVessel width="200"
                  placement="bottom-start"
                  v-if="onoff === 'ON'&&data.showOnOff&&$hasPermission('sys:tenant:dataconnect:manageIntergrationSetting')">
      <template>
        <i18n path="custom.integrationLog"
              tag="div">
          <span place="dom"><br /></span>
        </i18n>
        <el-button size="mini"
                   style="width:100%"
                   @click="startStop"
                   :loading="syncLoading"
                   type="danger">{{$t('yes')}}</el-button>
      </template>
      <template v-slot:reference>
        <el-tooltip :content="$t('custom.stopSync')">
          <i class="cuifont  icon_pause cursor-pointer"></i>
        </el-tooltip>
      </template>
    </ButtonVessel>

    <ViewLinkedInfo :linkKey="`${data.sync.subjectCode}wiki`"
                    class="linked-info" />

    <el-tooltip :content="$t('custom.close')" :open-delay="1000">
      <i class="cuifont  icon_dismiss cursor-pointer"
         @click="handleClose"></i>
    </el-tooltip>
  </div>
</template>

<script>
import ButtonVessel from '@/components/button-vessel'
import { Component } from '../modules/Component.js'
import EmitterMixin from '@/mixins/emitter'

export default {
  name: 'LogToolbox',
  components: {
    ButtonVessel
  },
  mixins: [EmitterMixin],
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      onoff: 'ON',
      syncLoading: false
    }
  },
  watch: {
    onoff (val) {
      if (val === 'ON') {
        this.dispatch('ConnectorItem', 'event:trun', false)
      } else {
        this.dispatch('ConnectorItem', 'event:trun', true)
      }
    }
  },
  created () {
    this.getOnOff()
  },
  methods: {

    routerTo (url) {
      window.open(url, '_blank')
    },

    handleClose () {
      this.dispatch('ConnectorItem', 'event:close')
    },
    startTest () {
      this.dispatch('ConnectorItem', 'event:test', this.data)
    },
    syncData () {
      this.$root.eventBus.$emit('event:refresh-log')
    },
    async startStop () {
      const { get } = this._
      const { controlTdDataSync } = this.$interface.taskManager

      try {
        this.syncLoading = true
        const params = {
          subjectCode: get(this.data, 'sync.subjectCode'),
          tenantId: this.$store.state.user.tenantCode,
          onoff: this.onoff === 'ON' ? 'OFF' : 'ON',
          creator: this.$store.state.user.id
        }

        let { data: response } = await controlTdDataSync(params)

        if (response.code !== 0) {
          throw get(response, 'msg', '')
        }

        this.onoff = get(response, 'data')
        Component.$emit('getConnectorConfig')
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.syncLoading = false
      }
    },
    async getOnOff () {
      const { get } = this._
      const { controlTdGetOnOffStatusSync } = this.$interface.taskManager

      try {
        const params = {
          subjectCode: get(this.data, 'sync.subjectCode'),
          tenantId: this.$store.state.user.tenantCode
        }

        let { data: response } = await controlTdGetOnOffStatusSync(params)

        if (response.code !== 0) {
          throw get(response, 'msg', '')
        }

        this.onoff = get(response, 'data')
      } catch (error) {
        this.$message.error(error)
      } finally {

      }
    }
  }
}
</script>

<style lang="scss" scoped>
.log-toolbox {
  .ellipsis-vessel {
    margin-left: 7px;
  }
  .cuifont,
  .linked-info {
    font-size: 14px;
    color: #404040;
    font-weight: 400;
    height: 28px;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    ::v-deep .icon_help_circle {
      margin-left: 0 !important;
      font-size: 14px !important;
      color: #404040;
      font-weight: 400 !important;
    }
    &:hover {
      color: #138dc7;
      background-color: #e6f7ff;
      border-radius: 4px;
    }
  }
}

.el-badge {
  ::v-deep .el-badge__content {
    margin-right: 9px;
    margin-top: 7px;
  }
}

.cuifont {
  ::v-deep .el-loading-spinner {
    margin-top: -9px;
  }
}
</style>
